<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" href="./css/adminTable.css">
    <link rel="stylesheet" href="./css/global.css">
</head>
	
	<%if(request.getAttribute("userBeans")==null){%>
		<script language="javascript">
			function getUsers() {
				window.location.href = "${pageContext.request.contextPath }/AdminServlet?method=getUsers";
			}
			getUsers();
		</script>
	<%}%>
<body onload="">
	
	<jsp:include page="head.jsp"></jsp:include>
    <div class="users">
    	<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
		<thead>
			<tr>
				<th class="nosort"><h3>编号</h3></th>
				<th><h3>用户名</h3></th>
				<th><h3>手机</h3></th>
				<th><h3>Email</h3></th>
				<th><h3>性别</h3></th>
				<th><h3>生日</h3></th>
				<th><h3>状态</h3></th>
				<th><h3>操作</h3></th>
				
			</tr>
		</thead>
        <tbody>
        <c:forEach items="${userBeans}" var="u" varStatus="i">
            <tr>
				<td><div class="id">${i.index+1}</div></td>
				<td style="display: none"><input type="text" name="uid" value="${u.uid}"></td> 
				<td><input type="text" name="username" value="${u.username}" readonly required minlength="6" maxlength="16"></td>
				<td><input type="tel"  name="phone" value="${u.phone}" readonly required pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}"></td>
				<td><input type="email" name="email" value="${u.email}" readonly></td>
				<td><input type="text" name="sex" value="${u.sex}" readonly></td>
				<td><div class="birthday">${u.birthday}</div></td>
				<td><div class="state">${u.state}</div></td>
				
				<td>
					<div class="flex">
						<a href="javascript:;"  class="edit">编辑</a>
						<a href="${pageContext.request.contextPath }/AdminServlet?method=disState&uid=${u.uid}" class="dis">禁用</a>
						<a href="${pageContext.request.contextPath }/AdminServlet?method=delUser&uid=${u.uid}"   class="del">删除</a>
						<a class="save">确定</a>
					</div>
				</td>
			</tr>
		</c:forEach>
        </tbody>
    </table>    


    <div id="controls">
		<div id="perpage">
			<select onchange="sorter.size(this.value)">
				<option value="5" >5</option>
				<option value="10" selected="selected">10</option>
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
			</select>
			<span>每页数量</span>
		</div>
		<div id="navigation">
			<img src="./images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
			<img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
			<img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
			<img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
		</div>
		<div id="text">当前页面<span id="currentpage"></span> / <span id="pagelimit"></span></div>
	</div>
    </div>
	<jsp:include page="footer.jsp"></jsp:include>
	<script type="text/javascript" src="./js/adminTable.js"></script>
	<script type="text/javascript" src="./js/jquery-1.12.4.js"></script>
	<script type="text/javascript">
			var sorter = new TINY.table.sorter("sorter");
			sorter.head = "head";
			sorter.asc = "asc";
			sorter.desc = "desc";
			sorter.even = "evenrow";
			sorter.odd = "oddrow";
			sorter.evensel = "evenselected";
			sorter.oddsel = "oddselected";
			sorter.paginate = true;
			sorter.currentid = "currentpage";
			sorter.limitid = "pagelimit";
			sorter.init("table",1);
			
	</script>
	<script src="./js/jquery-1.12.4.js"></script>
	<script>
		$(".edit").click(function(){
			$(this).parents("td").siblings().find("input").removeAttr("readonly")
		}) 
		$(".del").click(function(){
			return confirm('你确认要删除吗？')
		}) 
		
		$(".save").click(function(){
			var uid=$(this).parents("td").siblings().find("input[name=uid]").val()
			var username=$(this).parents("td").siblings().find("input[name=username]").val()
			var phone=$(this).parents("td").siblings().find("input[name=phone]").val()
			var email=$(this).parents("td").siblings().find("input[name=email]").val()
			var sex=$(this).parents("td").siblings().find("input[name=sex]").val()
			window.location.href="${pageContext.request.contextPath }/AdminServlet?method=save&uid="+uid+"&username="+username+"&phone="+phone+"&email="+email+"&sex="+sex
		}) 
	</script>
</body>
</html>